{% extends theme_path('base.html') %}

{% block title %}我的文章{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">我的文章</h1>
            <a href="{{ url_for('blog.edit') }}" 
               class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                写新文章
            </a>
        </div>

        <div class="space-y-6">
            {% for article in articles.items %}
            <div class="border-b border-gray-100 dark:border-gray-700 pb-6 last:border-0 last:pb-0">
                <h2 class="text-xl font-bold mb-2">
                    <a href="{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) }}" 
                       class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">
                        {{ article.title }}
                    </a>
                </h2>
                <div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-3">
                    <span class="flex-shrink-0">{{ article.category.name }}</span>
                    <span class="hidden sm:inline">•</span>
                    <span class="flex-shrink-0">{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    <span class="hidden sm:inline">•</span>
                    <span class="flex-shrink-0">阅读 {{ article.view_count }}</span>
                    <span class="hidden sm:inline">•</span>
                    <span class="flex-shrink-0">评论 {{ article.comments|length }}</span>
                </div>
                <div class="text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
                    {{ article.content|striptags|truncate(200) }}
                </div>
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex flex-wrap items-center gap-2">
                        {% for tag in article.tags %}
                        <a href="{{ url_for('blog.tag', tag_id_or_slug=tag.id if not tag.use_slug else tag.slug) }}" 
                           class="text-sm bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-3 py-1 rounded-full mr-2 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">
                            {{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                    <div class="flex items-center gap-3 flex-shrink-0">
                        <a href="{{ url_for('blog.edit', id=article.id) }}" 
                           class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                            编辑
                        </a>
                        <button onclick="deleteArticle({{ article.id }})"
                                class="text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">
                            删除
                        </button>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="text-center py-12">
                <p class="text-gray-500 dark:text-gray-400 mb-4">还没有发布过文章</p>
                <a href="{{ url_for('blog.edit') }}" 
                   class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    开始写作
                </a>
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if articles.pages > 1 %}
        <div class="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
            {% with endpoint='user.my_articles' %}
            {% include 'components/pagination.html' %}
            {% endwith %}
        </div>
        {% endif %}
    </div>
</div>

<script>
function deleteArticle(articleId) {
    showAlert('确定要删除此文章吗？此操作不可恢复！', 'info', '确认删除', function() {
        fetch(`/article/${articleId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': '{{ csrf_token() }}'
            }
        }).then(response => {
            if (response.ok) {
                location.reload();
            } else {
                response.json().then(data => {
                    alert(data.error || '删除失败');
                });
            }
        });
    });
}
</script>
{% endblock %} 